$(function () {
    //装载时间插件
    function timepicker(){
        $('.input-date-box').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            minView:2,
            pickerPosition:"bottom-right"
        });
    };
    if(!localStorage.previewFormJson && !localStorage.previewFormDes){
        $('.empty-tips').text('表单数据为空，请先创建表单输入项');
        return false;
    }
    //获取表单描述
    $('#formDescription').html(decodeURI(localStorage.previewFormDes));
    prettyPrint();
    //获取真实图片地址
    $('#formDescription').find('img[data-srcurl]').each(function () {
        (function (_this) {
            var srcurl = _this.attr('data-srcurl');
            if(srcurl && srcurl != 'undefined'){
                new followupPlan().getRealSrc(srcurl,function (res,status) {
                    res = JSON.parse(res);
                    if(res.code = '000'){
                        _this.attr('src',res.data);
                    }
                });
            }
        })($(this));
    });
    //获取真实视频地址
    $('#formDescription').find('embed').each(function () {
        (function (_this) {
            var srcurl = _this.attr('data-srcurl');
            var width = _this.attr('width');
            var height = _this.attr('height');
            if(srcurl && srcurl != 'undefined'){
                new followupPlan().getRealSrc(srcurl,function (res,status) {
                    res = JSON.parse(res);
                    if(res.code = '000'){
                        _this.after('<video width="'+ width +'" height="'+ height +'" controls="controls" src="'+ res.data +'"></video>');
                        _this.remove();
                    }
                });
            }else{
                _this.after('<video width="'+ width +'" height="'+ height +'" controls="controls" src="'+ _this.attr('src') +'"></video>');
                _this.remove();
            }
        })($(this));
    });
    //渲染表单
    var formArray = localStorage.previewFormJson.split('*-*');
    var len = formArray.length;
    var formItem = {};
    var html = '';
    for(var j = 0;j<len;j++){
        formItem = JSON.parse(formArray[j]);
        if(formItem.inputtype == 5 && formItem.type == 0){
            html += inputHtml.text(formItem.name);
        }else if(formItem.inputtype == 2 && formItem.type == 0){
            html += inputHtml.date(formItem.name);
        }else if(formItem.inputtype == 7 && formItem.type ==0){
            html += inputHtml.image(formItem.name);
        }else if(formItem.inputtype == 6 && formItem.type ==0){
            html += inputHtml.video(formItem.name);
        }else if(formItem.inputtype == 5 && formItem.type ==1){
            html += inputHtml.textarea(formItem.name);
        }else if(formItem.inputtype == 3 && formItem.type ==1){
            html += inputHtml.select(formItem.name,formItem.options);
        }else if(formItem.inputtype == 3 && formItem.type ==0){
            html += inputHtml.radio(formItem.name,formItem.options);
        }else if(formItem.inputtype == 4 && formItem.type ==0){
            html += inputHtml.multi(formItem.name,formItem.options);
        }else if(formItem.inputtype == 8 && formItem.type ==0){
            html += inputHtml.slider(formItem.name,formItem.options,+formItem.restriction.min,+formItem.restriction.max);
        }else if(formItem.inputtype == 1 && formItem.type ==0){
            html += inputHtml.number(formItem.name,formItem.unit);
        }
    }
    $('#inputBox').html(html);
    timepicker();
    $.material.init();
    //noslider
    var sliderList = $('.noUi-slider-box');
    for(var i = 0;i<sliderList.length;i++){
        var min = +$(sliderList[i]).attr('data-min');
        var max = +$(sliderList[i]).attr('data-max');
        noUiSlider.create(sliderList[i], {
            range: {
                'min': min,
                'max': max
            },
            start:min,
            step: 1,
            margin: 20,
            connect:'lower',
            pips: {
                mode: 'steps',
                density: 100
            }
        });
    }
    $('.inner-box').removeClass('hidden');
    $('.empty-tips').remove();
});
var inputHtml = {
    text : function (inputTitle) {
        return [
            '<div class="col-sm-4">',
            '<div class="form-group">',
            '<label class="col-md-4 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-6">',
            '<input type="text" class="form-control" placeholder="未填写">',
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    date : function (inputTitle) {
        return [
            '<div class="col-sm-4">',
            '<div class="form-group">',
            '<label class="col-md-4 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-6">',
            '<input type="text" readonly class="form-control input-date-box"  data-date-format="yyyy-mm-dd" value="年/月/日"/>',
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    number:function (inputTitle,unit) {
        return [
            '<div class="col-sm-4">',
            '<div class="form-group">',
            '<label class="col-md-4 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-6">',
            '<input type="text" class="form-control" placeholder="未填写">',
            '</div>',
            '<label class="col-md-2 control-label">'+ unit +'</label>',
            '</div>',
            '</div>'
        ].join('');
    },
    image:function (inputTitle) {
        return [
            '<div class="col-sm-12 img-vedio" id="addImg">',
            '<div class="form-group">',
            '<label class="col-md-12 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-12">',
            '<div class="img-container"><span class="del-form">×</span><img src="../../img/code.jpg"/></div>',
            '<div class="add-container update-img"><i class="material-icons">&#xE145;</i><input type="file" accept="image/*" ></div>',
            //'<input type="text" readonly="" class="form-control" placeholder="上传图片...">',
            //'<input type="file" accept="image/*">',
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    video:function (inputTitle) {
        return [
            '<div class="col-sm-12" id="addVedio">',
            '<div class="form-group">',
            '<label class="col-md-12 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-12">',
            '<div class="vedio-container"><span class="del-form">×</span><span class="media-play"><i class="material-icons">&#xE039;</i></span></div>',
            '<div class="vedio-container"><span class="del-form">×</span><span class="media-play"><i class="material-icons">&#xE039;</i></span></div>',
            '<div class="vedio-container"><span class="del-form">×</span><span class="media-play"><i class="material-icons">&#xE039;</i></span></div>',
            '<div class="vedio-container"><span class="del-form">×</span><span class="media-play"><i class="material-icons">&#xE039;</i></span></div>',
            '<div class="vedio-container"><span class="del-form">×</span><span class="media-play"><i class="material-icons">&#xE039;</i></span></div>',
            '<div class="add-container update-img"><i class="material-icons">&#xE145;</i><input type="file" accept="video/*" ></div>',
            //'<input type="text" readonly="" class="form-control" placeholder="上传视频...">',
            //'<input type="file" accept="video/*">',
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    textarea:function (inputTitle) {
        return [
            '<div class="col-sm-12">',
            '<div class="form-group">',
            '<label class="col-md-2 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-10">',
            '<textarea class="form-control"></textarea>',
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    select:function (inputTitle,options) {
        var optionStr ='';
        for(var i =0,len=options.length;i<len;i++){
            optionStr += '<option>'+ options[i].optionname +'</option>';
        }
        return [
            '<div class="col-sm-4">',
            '<div class="form-group">',
            '<label class="col-md-6 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-6">',
            '<select class="form-control">'+ optionStr +'</select>',
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    radio:function (inputTitle, options) {
        var optionStr ='';
        for(var i =0,len=options.length;i<len;i++){
            optionStr += [
                '<div class="col-md-3"><div class="radio radio-primary">',
                '<label>',
                '<input type="radio" name="'+ inputTitle +'">',
                options[i].optionname,
                '</label>',
                '</div></div>'
            ].join('');
        }
        return [
            '<div class="col-sm-12">',
            '<div class="form-group">',
            '<label class="col-md-12 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-12">',
            optionStr,
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    multi:function (inputTitle, options) {
        var optionStr ='';
        for(var i =0,len=options.length;i<len;i++){
            optionStr += [
                '<label class="col-md-2">',
                '<input type="checkbox"> ' + options[i].optionname,
                '</label>'
            ].join('');
        }
        return [
            '<div class="col-sm-12">',
            '<div class="form-group">',
            '<label class="col-md-12 control-label">'+ inputTitle +'</label>',
            '<div class="col-md-12 checkbox">',
            optionStr,
            '</div>',
            '</div>',
            '</div>'
        ].join('');
    },
    slider:function (inputTitle, options, min, max) {
        var optionStr ='';
        for(var i =0,len=options.length;i<len;i++){
            optionStr += [
                '<div class="col-sm-12">',
                '<div class="form-group">',
                '<label class="col-md-12 control-label">'+ options[i].optionname +'</label>',
                '<div class="col-md-12">',
                '<div class="slider shor noUi-slider-box" data-min="'+ min +'" data-max="'+ max +'"></div>',
                '</div>',
                '</div>',
                '</div>'
            ].join('');
        };
        return [
            '<div class="col-sm-12 slider-container">',
            '<p class="col-sm-12 slider-title">'+ inputTitle +'</p>',
            optionStr,
            '<p class="col-sm-4 col-lg-offset-8 text-right slider-total">总计：100分</p>',
            '</div>'
        ].join('');
    }
};